window.onload = function() {
	var creat = document.querySelector('.creat');
	var del = document.querySelector('.del');
	var wrap = document.querySelector('.wrap');
	var info = document.querySelector('.info');
	var timer = 0;
	creat.onclick = function() {
		/* 创建元素，并添加事件 */
		var file = document.createElement('div');
		var fileName = getFileName();
		file.className = "file";
		file.innerHTML = '<input type="checkbox" name=""><span class="fileName" contenteditable>'
				+ fileName + '</span>';
		var check = file.querySelector('input[type = "checkbox"]');
		var fileName = file.querySelector('.fileName');
		file.onmouseover = function() {
			this.className = "file fileShow";
		};
		file.onmouseout = function() {
			if (!check.checked) {
				this.className = "file";
			}
		};
		fileName.onblur = function() {
			if (this.innerHTML.trim() == "") {
				info.innerHTML = "请输入文件夹名字";
				info.style.transform = "translateY(0)";
				this.focus();
				clearTimeout(timer);
				timer = setTimeout(function() {
					info.style.transform = "translateY(-50px)";
				}, 2000);
				return;
			}
			var fileNames = document.querySelectorAll('.fileName');
			for (var i = 0; i < fileNames.length; i++) {
				if (this != fileNames[i]
						&& this.innerHTML == fileNames[i].innerHTML) {
					info.innerHTML = "文件夹名字重名了，请重新输入";
					info.style.transform = "translateY(0)";
					this.focus();
					clearTimeout(timer);
					timer = setTimeout(function() {
						info.style.transform = "translateY(-50px)";
					}, 2000);
				}
			}
		};
		/* onkeydown 键盘按下 */
		fileName.onkeydown = function() {
			if (this.innerHTML == "请输入名字") {
				this.innerHTML = "";
			}
		}
		wrap.appendChild(file);
		
	};
	del.onclick = function() {
		/* 删除选中的元素 */
		var fileName = wrap.querySelectorAll('input:checked+.fileName');
		var input = wrap.getElementsByTagName("input")
		/* query方法只获取一次，dom修改了如果不重新获取，它是不会和dom同步的而get方法会时时和dom同步，dom改了get获取到的数据也会自定修改 */
		// console.log(fileName,input);
		for (var i = 0; i < fileName.length; i++) {
			wrap.removeChild(fileName[i].parentNode);
		}
		console.log(fileName);
	};
	// 获取文件夹名字
	/*
	 * 创建文件夹名字并进行排序 0 新建文件夹 1 新建文件夹2 2 新建文件夹3
	 * 
	 * 第一种情况：正常排序
	 */
	function getFileName() {
		var fileName = "新建文件夹";
		var fileNameLast = "";
		var fileNames = wrap.querySelectorAll('.fileName');
		if (fileNames.length == 0) { // 当前一个都还没有也就是创建第0个
			return fileName;
		}
		// 当中间可能删除了几个
		/*
		 * 由于中间会删除再添加，所以顺序会被打乱 把所有的名字存入数组，然后进行排序
		 */
		var names = [];
		for (var i = 0; i < fileNames.length; i++) {
			names.push(fileNames[i].innerHTML);
			
		}
	
		foleName = fileNames[fileNames.length-1].innerHTML;
			var jsonStr = JSON.stringify({folderId:null,foleName:"gejjj",fileId:null,userId:null});
			console.log("kkk"+jsonStr);
			$.ajax({
//				alert("hello"),
				type:'post',
				url:"${pageContext.request.contextPath}/addFolder",
				data: jsonStr,
//			  dataType: "json",
		      contentType:'application/json;charset=utf-8',
		      async:false,
				function (data) {
		    	  console.log(data);
	      		},
	      		error:function(xhr){
			    	  alert(xhr.status);
			    	  return false;
			      }
		    });
		
		names = names.filter(function(val) {
			var startName = val.substr(0, 5);
			if (startName != "新建文件夹") {
				return false; /* 筛选掉不是已新建文件夹命名的 */
			}
			var lastName = val.substr(5);
			if (isNaN(lastName)) { /* 筛选掉不是已新建文件夹跟随的不是数字的 */
				return false;
			}
			return true;
		});
		names.sort(function(a, b) {
			return a.substr(5) - b.substr(5);
		});
		console.log(names);
		for (var i = 0; i < names.length; i++) {
			if (names[0] != fileName) {
				return fileName;
			}
			if (i > 0 && names[i] != fileName + (i + 1)) {
				return fileName + (i + 1);
			}
		}
		// 当前顺序向后排列 name 就等于在当前的个数上+1
		fileNameLast = names.length + 1;
		fileName += fileNameLast;
		return fileName;
	}
};